<template>
  <view class="login-container">

      <view class="main-content">
          <view class="header-content">
              <text class="title">您好！</text>
              <text class="subtitle">欢迎来到人工智能党建，请登录使用</text>
          </view>
          <view class="login-form">
              <view class="form-item">
                  <text class="form-label">设备号:</text>
                  <input v-model="formData.account"  placeholder="请输入您的设备号" />
              </view>
              <view class="form-item">
                  <text class="form-label">密码:</text>
                  <input type="password" v-model="formData.password" placeholder="请输入密码"  />
<!--                  <view class="forget">忘记密码</view>-->
              </view>
          </view>

          <view class="login-btn">
              登录
          </view>
      </view>

  </view>
</template>
<script>

export default {
  data () {
    return {
        formData: {
            account: '',
            password: ''
        }
    }
  },
  methods: {


  },
}
</script>
<style lang="scss" scoped>
    .login-container {
        width: 100vw;
        height: 100vh;
        background-image: url("https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dang/login_background.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 290rpx;

        .main-content {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            .header-content {
                display: flex;
                flex-direction: column;
                .title {
                    font-size: 48rpx;
                    color: #fd2e2d;
                    font-weight: bold;
                }
                .subtitle {
                    color: #333333;
                    margin-top: 30rpx;
                    font-size: 36rpx;
                }
            }
            .login-form {
                margin-top: 70rpx;
                .form-item {
                    display: flex;
                    padding: 30rpx 0;
                    border-bottom: 1rpx solid #e6e6e6;
                    align-items: center;
                    .form-label {
                        font-size: 28rpx;
                        width: 120rpx;
                    }
                    .forget {
                        width: 200rpx;
                        padding: 15rpx 0;
                        text-align: center;
                        font-size: 28rpx;
                        border-radius: 50rpx;
                        border: 1rpx solid #F52827;
                        color: #F52827;
                    }
                }
            }

            .login-btn {
                width: 95%;
                height: 90rpx;
                background:linear-gradient(to right, #ff302f,#dc1411);
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50rpx;
                margin-left: auto;
                margin-right: auto;
                margin-top: 60rpx;
            }

        }

    }
</style>
